<script>
import MindMap from "simple-mind-map";
import Request from "../../utils/Request.js";

export default {
  name: "MindMapView",
  props: {
    id: String,
    mindmapText: String,
  },
  data() {
    return {
      mindMap: null,
    };
  },
  methods: {
    getContent() {
      Request({
        url: "/api/project/mindmap/content",
        method: "post",
        data: {
          projectId: this.$route.params.projectId,
          id: this.id,
        },
      }).then(({ data }) => {
        if (data.code === 0) {
          if (data.data != null) {
            try {
              this.mindMap.setFullData(JSON.parse(data.data));
            } catch (e) {}
          }
        } else {
          ElMessage.error(data.msg);
        }
      });
    },
    async initMindMap() {
      this.mindMap = new MindMap({
        el: document.getElementById("mindMapViewContainer"),
        data: null,
        readonly: true,
      });

      if (this.mindmapText != null) {
        this.mindMap.setFullData(JSON.parse(this.mindmapText));
      }
      if (this.mindmapText == null) {
        this.getContent();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initMindMap();
    });
  },
};
</script>
<template>
  <div id="mindMapViewContainer"></div>
</template>

<style scoped>
#mindMapViewContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
#mindMapViewContainer * {
  margin: 0;
  padding: 0;
}
</style>